<template>
  <div class="book-tag">
    <!-- 导航栏 -->
    <van-nav-bar :title="title" left-arrow @click-left="back()" />
    <div v-if="!loading" class="body">

      <van-list v-model="waiting" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <!-- BookItemA -->
        <BookItemA v-for="b in TagBookDetail" :key="b.id" :book-name="b.name" :book-authors="b.authors"
          :cover-key="b.coverKey" :id="b.id" />
      </van-list>
      <!-- ViewItem -->
      <!-- <ViewItem
        v-for="a in TagArticleDetail.articleListItems"
        :key="a.id"
        :articlePersonalCategoryName="a.articlePersonalCategoryName"
        
        :imageKey="a.authorAvatarImageKey"
        :publishDate="a.publishDate"
        :subject="a.subject"
        :tags="a.tags"
        :viewCount="a.viewCount"
        :voteCount="a.voteCount"
        @click.native="toArticle(a.id)"
      ></ViewItem> -->
    </div>
    <div v-if="loading" class="loading">
      <van-loading size="24px" vertical>加载中...</van-loading>
    </div>
  </div>
</template>

<script>
import { TagBookAPI, } from "@/apis"; // TagArticleAPI
import BookItemA from "@/components/BookItem-A.vue";
// import ViewItem from "@/components/ViewItem.vue";
export default {
  props: ["id"],
  data() {
    return {
      loading: true,
      page: 1,
      sort: "new",
      // title
      title: '',
      // 图书数据
      TagBookDetail: [],
      // 文章数据
      // TagArticleDetail: [],
      // 下拉加载
      waiting: false,
      finished: false,
    }
  },

  mounted() {
    this.loading = true
    this.getTagBookDetail();
    // 文章请求
    // this.getTagArticleDetail();
  },
  methods: {
    // 网络请求(图书)
    async getTagBookDetail() {
      let { data } = await this.$http(
        TagBookAPI(this.id, this.page, this.sort)
      );
      this.title = data.tagName;
      this.TagBookDetail = data.bookItems;
      this.$nextTick(() => {
        this.loading = false
      })
    },
    // 下拉加载(图书)
    async onLoad() {
      this.page++;
      let { data } = await this.$http(
        TagBookAPI(this.id, this.page, this.sort),
      );
      if (data.pagination.totalItemCount <= this.page * 20 + 20) {
        this.finished = true;
      }
      this.TagBookDetail = [...this.TagBookDetail, ...data.bookItems];
      this.waiting = false;
    },

    // 网络请求(文章)
    // async getTagArticleDetail() {
    //   let { data } = await this.$http(
    //     TagArticleAPI(this.id, this.page, this.sort)
    //   );
    //   console.log(data);
    //   this.TagArticleDetail = data;
    // },
    // 回退
    back() {
      this.$router.go(-1);
    },
    // to 文章
    // toArticle(id) {
    //   this.$router.push({ path: `/article/${id}` });
    // },
  },
  components: {
    BookItemA,
    // ViewItem,
  },
};
</script>

<style lang="scss" scoped>
.book-tag {
  position: relative;
  width: 100vw;
  background-color: #fff;
  z-index: 999;

  .van-nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    width: 100vw;
  }

  .body {
    margin-top: 5px;
    padding: 50px 15px;
    padding-bottom: 50px;

    .van-list{
      display: flex;
      flex-wrap: wrap;
    }
  }
}
</style>

